<template>
    <div>
        <cjcNav title="教师打卡" @customRouter="customRouter"></cjcNav>
        <div class="exam-content" style="height:calc(100vh - 50px)">
            <!-- 选择时间 -->
            <Row :gutter="8" class="exam-select" v-if="$store.state.SchoolWeekList">
                <Col span="12">
                    <Select v-model="term" >
                        <Option :value="this.$store.state.SchoolWeek.XN + ' 第' + this.$store.state.SchoolWeek.XQ + '学期'">
                            {{$store.state.SchoolWeekList[0].XN}} 第{{$store.state.SchoolWeekList[0].XQ}}学期
                        </Option>
                    </Select>
                </Col>
                <Col span="12">
                    <Select v-model="week"  @on-change="select">
                        <Option :value="item.ZC" v-for="item in $store.state.SchoolWeekList" :key="item.ZC">第{{item.ZC}}周</Option>
                    </Select>
                </Col>
            </Row>

            <!-- 列表详情 -->
            <div class="exam-contain" ref="examContain">

                <div class="exam-item" v-for="item in this.$store.state.getCountSignList" :key="item.index" @click="toDetail(item)">
                    <div class="item-left">
                        <!-- <div class=""> -->
                        <div class="left-name">{{ item.NAME }}</div>
                        <!-- </div> -->
                        <div class="left-time">本周打卡
                            <span class="left-time1"><span class="left-time2">{{ item.PRACTICAL_TIME }}</span>/{{ item.SHOULD_TIME }}</span>小时
                        </div>
                    </div>
                    <div class="item-right">
                        <div class="right-status1" v-if="item.CLOCK_STATUS === '已满'">已满</div>
                        <div class="right-status2" v-if="item.CLOCK_STATUS === '未满'">未满</div>
                        <!-- <div class="right-status2">未满</div> -->
                        <Icon type="chevron-right" size="18" color="#e5e5e5"></Icon>
                    </div>
                </div>

            </div>
        </div>
        <Spin size="large" fix v-if="loading" style="positioin: fixed"></Spin>
    </div>
</template>

<script>
export default {
    name: 'examineCondition',
    data() {
        return {
            term: '',
            week: 1,
            loading: false,
            xuenian: '',
            xueqi: '',
        }
    },
    components: {
        cjcNav: () => import('../../components/common/Nav.vue')
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        toDetail(item) {
            this.$router.push({
                name: 'recordetail',
                params: {
                    week: this.week
                }
            })
            sessionStorage.setItem('teaId', item.USER_ID)
            sessionStorage.setItem('manId', 1)
        },
        select() {
            let Vm = this
            async function setTeaPlanList() {
                Vm.loading = true
                let teaPlanList = await Vm.$store.dispatch('getCountSignList', {
                    XN: Vm.$store.state.SchoolWeek.XN,
                    XQ: Vm.$store.state.SchoolWeek.XQ,
                    ZC: Vm.week
                })
                Vm.$store.commit('SET_GetCountSignList', teaPlanList.result)
                Vm.loading = false
            }
            setTeaPlanList()
        },
        /**
         * 设置教学周
        */
        async setSchoolWeekList() {
            let SchoolWeekList = await this.$store.dispatch('getSchoolWeekList')
            this.$store.commit('SET_SchoolWeekList', SchoolWeekList.result)
            this.term = this.$store.state.SchoolWeek.XN + ' 第' + this.$store.state.SchoolWeek.XQ + '学期'
            // console.log(this.term)
        },
        // 设置当前周
        async setSchoolWeek() {
            let SchoolWeek = await this.$store.dispatch('getSchoolWeek')
            this.$store.commit('SET_SchoolWeek', SchoolWeek.result)
            this.week = this.$store.state.SchoolWeek.ZC
        },
        // 获取列表
        async setTeaPlanList() {
            console.log(this.$store.state.SchoolWeek)
            let teaPlanList = await this.$store.dispatch('getCountSignList', {
                XN: this.$store.state.SchoolWeek.XN,
                XQ: this.$store.state.SchoolWeek.XQ,
                ZC: this.week
            })
            this.$store.commit('SET_GetCountSignList', teaPlanList.result)
        },
    },
    created() {
        const Vm = this
        Vm.loading = true
        async function step() {
            await Vm.setSchoolWeek()
            await Vm.setSchoolWeekList()
            Vm.xuenian = Vm.$store.state.SchoolWeek.XN
            Vm.xueqi = Vm.$store.state.SchoolWeek.XQ
            Vm.term = Vm.xuenian + ' 第' + Vm.xueqi + '学期'
            await Vm.setTeaPlanList()
            Vm.loading = false
        }
        this.$store.dispatch('isUserInfo').then(res => {
            step()
        })
        setTimeout(() => {
            let examContain = Vm.$refs.examContain
            examContain.scrollTop = sessionStorage.getItem('examContainScrollTop')
            let scrool = () => {
                let scrollTop = examContain.scrollTop
                // let [scrollTop, offsetHeight, scrollHeight] = [examContain.scrollTop, examContain.offsetHeight, examContain.scrollHeight]
                console.log(scrollTop)
                sessionStorage.setItem('examContainScrollTop', scrollTop)
            }
            examContain.addEventListener('scroll', scrool)
        }, 0)
    },
}
</script>

<style lang="less">
.topRight {
    color: #0093dd;
    margin: 0 15px 0 0;
    font-size: 14PX;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.exam-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}
.exam-select {
    // width: 100%;
    padding: 15px;
    // height: 50px;
    border-bottom: 1px solid #f8f8f8;
    background-color: #fff; 
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.exam-contain {
    // padding: 15px;
    overflow: auto;
    background-color: #fff;

}
.exam-item {
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(238, 238, 238, 0.25);
}
.item-left {
    width: 70%;
    display: flex;
    flex-direction: column;

}
.item-right {
    display: flex;
    justify-content: space-between;
    width: 25%;
    align-items: center;
}
.right-status1 {
    height: 20px;
    width: 40px;
    background-color: #0093dd;
    color:#fff;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right-status2 {
    height: 20px;
    width: 40px;
    background-color: red;
    color:#fff;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-name {
    font-size: 16px;
    color: #000000;
    margin: 6px 0;
    span {
        margin-left: 10px;
        font-size: 12px;
        color: #999999;
    }
}
.left-time {
    font-size: 12px;
    color: #999999;
    margin: 6px 0;
    .left-time1 {
        margin: 0 10px;
    }
    .left-time2 {
        color: #0093dd;

    }
}
</style>
